<template>
  <div class="comp-home-category-container">
    <template v-if="categoryLength">
      <div class="title">您可以卖</div>
      <div class="category-wrapper">
        <a
          v-for="category in categoryList"
          :key="category.id"
          :href="[baseUrl+'/product?cid='+category.id]"
          class="category-item">
          <div :class="['img-box',`img-box--${category.id}`]">&nbsp;</div>
          <span class="name">{{ category.name }}</span>
        </a>
      </div>
    </template>
  </div>
</template>
<script>
import Request from '../../common/request.js'
import config from '../../config.js'
const baseUrl = config[config.env]['baseUrl'] // 获取当前环境下的baseUrl
export default {
  data: () => ({
    categoryList: [],
    baseUrl
  }),
  computed: {
    categoryLength () {
      return this.categoryList.length
    }
  },
  async mounted () {
    const opts = {
      url: 'https://neon.aihuishou.com/v1/current_app/categories'
    }
    let res = null
    try {
      res = await Request(opts)
    } catch (e) {
      console.warn(e)
      return false
    }
    this.categoryList = res
  }
}
</script>
<style lang="less" scoped>
@import (reference) "../../styles/index.less";

.comp-home-category-container {
  background-color: #fff;
  padding: 0.1rem 0 0.17rem;
  background: #fff;
  .title {
    text-align: center;
    .set-font-color(0.17rem,#333,bold);
  }
  .category-wrapper {
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    .category-item {
      display: flex;
      align-items: center;
      flex-direction: column;
      .img-box {
        margin-bottom: 0.1rem;
        width: 0.53rem;
        height: 0.53rem;
        &--1 {
          background: url("")
            no-repeat;
          background-size: contain;
        }
        &--6 {
          background: url("")
            no-repeat;
          background-size: contain;
        }
        &--5 {
          background: url("")
            no-repeat;
          background-size: contain;
        }
        &--22 {
          background: url();
          background-size: contain;
        }
        &--3 {
          background: url();
          background-size: contain;
        }
        &--7,
        &--26 {
          background: url();
          background-size: contain;
        }
      }
      .name {
        .set-font-color(0.13rem,
            #333);
      }
    }
  }
}
</style>
